@extends('layout.wechat_frame')

@section('main')


    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">日常报价-编辑需求</h1>
    </header>

    <form  method="post" action="{{ URL::full() }}">

        @if ($errors->has('msg'))
            <p style="color:#f50000">{{ $errors->first('msg') }}</p>
        @endif

        {!! csrf_field() !!}
        <div class="mui-content">
            <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                <li class="mui-table-view-cell">

                    <h4 class="mui-ellipsis" style="margin-top: 40px; margin-bottom: 10px">

                        <?php
                        // 通过ID取得物料名称
                        $offer_information_goods_name = \App\Goods::where('id', $offer_information->goods_id)->first()->name;
                        ?>
                        <span id='showUserPicker' class="ips-text-blue">{{$offer_information_goods_name}}</span>
                        <input type="text" id="goods_id" name="goods_id" value="{{$offer_information->goods_id}}" hidden>
                        <div style="display:none">
                            @foreach ($goods_records as $goods)
                                <p id="g-d-{{ $goods->id }}">{{ $goods->quality_standard }}</p>
                            @endforeach
                        </div>

                    </h4>

                    @if ($errors->has('goods_id'))
                        <p style="color:#f50000">{{ $errors->first('goods_id') }}</p>
                    @endif

                    <h5 class="ips-text-red" >质量指标:</h5>
                    <textarea id="quality_standard" name="quality_standard" class="ips-textarea" rows="5" placeholder="" readonly>{{ old('quality_standard', $offer_information->quality_standard) }}</textarea>
                    <h5 style="display: flex;">
                        <span class="ips-span-text-top">可供数量：</span>
                        <div class="mui-input-row mui-radio mui-left" >
                            <label>可供数量</label>
                            <input type="radio" @if(old('quantity_type', ($offer_information->quantity == -1 ? 'infinite' : 'limited')) == 'limited') checked @endif name="quantity_type" value="limited">
                        </div>
                        <span><input type="text" name="quantity" @if(old('quantity_type', ($offer_information->quantity == -1 ? 'infinite' : 'limited')) == 'limited') value="{{ strval((float)old('quantity', $offer_information->quantity)) }}" @endif class="ips-inputtext" style="width: 50px;" placeholder="">吨</span>
                        <div class="mui-input-row mui-radio mui-left">
                            <label>不限数量</label>
                            <input type="radio" @if(old('quantity_type', ($offer_information->quantity == -1 ? 'infinite' : 'limited')) == 'infinite') checked @endif name="quantity_type" value="infinite">
                        </div>
                    </h5>

                    @if ($errors->has('quantity') or $errors->has('quantity_type'))
                        <p style="color:#f50000">{{ $errors->first('quantity') }} {{ $errors->first('quantity_type') }}</p>
                    @endif

                    <h5 style="display: flex;">
                        <span class="ips-span-text-top">收款方式：</span>
                        <div class="mui-input-row mui-radio mui-left" >
                            <label style="width: 100px">先款后货</label>
                            <input type="radio"  @if(old('payment', $offer_information->payment) == '先款后货') checked @endif name="payment" value="先款后货">
                        </div>
                        <div class="mui-input-row mui-radio mui-left">
                            <label>货到</label>
                            <input type="radio"  @if(preg_match('#(\d+)#', $offer_information->payment)) checked @endif name="payment" value="货到x天后付款">
                        </div>
                        <span>

                            @if ($offer_information->payment != '先款后货')
                                <input type="text" name="payment_day" class="ips-inputtext" @if(preg_match('#(\d+)#', $offer_information->payment, $matched)) value="{{ old('payment_day', $matched[1]) }}" @endif style="width: 30px;" placeholder="">天后付款
                            @else
                                <input type="text" name="payment_day" class="ips-inputtext" @if(old('payment') == '货到x天后付款') value="{{ old('payment_day') }}" @endif style="width: 30px;" placeholder="">天后付款
                            @endif

                        </span>
                    </h5>

                    @if ($errors->has('payment') or $errors->has('payment_day'))
                        <p style="color:#f50000">{{ $errors->first('payment') }} {{ $errors->first('payment_day') }}</p>
                    @endif

                    <h5 style="margin-bottom: 10px">报价有效期：投标结束后<input type="text" name="price_validity" class="ips-inputtext" value="{{ old('price_validity', $offer_information->price_validity) }}" style="width: 30px;" placeholder="">小时</h5>

                    @if ($errors->has('price_validity'))
                        <p style="color:#f50000">{{ $errors->first('price_validity') }}</p>
                    @endif

                    <h5 style="margin-bottom: 10px">交货日（起）：<input type="text" data-options='{"type":"date"}' name="delivery_start" value="{{ old('delivery_start', $offer_information->delivery_start) }}" class="btn" style="height: 25px;width: 120px;" placeholder="选择日期 ..."/></h5>

                    @if ($errors->has('delivery_start'))
                        <p style="color:#f50000">{{ $errors->first('delivery_start') }}</p>
                    @endif
                    <h5 style="margin-bottom: 10px">交货日（止）：<input type="text" data-options='{"type":"date"}' name="delivery_stop" value="{{ old('delivery_stop', $offer_information->delivery_stop) }}" class="btn" style="height: 25px;width: 120px;" placeholder="选择日期 ..."/></h5>

                    @if ($errors->has('delivery_stop'))
                        <p style="color:#f50000">{{ $errors->first('delivery_stop') }}</p>
                    @endif
                    <h5 style="display: flex;">
                        <span class="ips-span-text-top">线下议价：</span>
                        <div class="mui-input-row mui-radio mui-left" >
                            <label>接受</label>
                            <input type="radio" name="bargaining" @if(old('bargaining', ($offer_information->bargaining?'true':'false')) == 'true') checked @endif value="true">
                        </div>
                        <div class="mui-input-row mui-radio mui-left">
                            <label>不接受</label>
                            <input type="radio" name="bargaining" @if(old('bargaining', ($offer_information->bargaining?'true':'false')) =='false') checked @endif value="false">
                        </div>
                    </h5>
                    @if ($errors->has('bargaining'))
                        <p style="color:#f50000">{{ $errors->first('bargaining') }}</p>
                    @endif
                </li>
            </ul>
        </div>
    <span id = "price-list">
        @if (!empty(old('prices', $offer_information->prices)))
            @foreach (old('prices', $offer_information->prices) as $k => $v)
                <div  class="mui-content ips-mui-content-no-top" >
                    <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                        <li class="mui-table-view-cell">
                            <h4 ><span class="ips-span-first">单价（元/吨）</span><span class="ips-span-input" >
						<input type="text" name="prices[]" class="ips-inputtext price" style="font-size: 16px; height: 25px;" placeholder="请填写" value="{{ $v }}" ></span></h4>

                            @if ($errors->has('prices'))
                                <p style="color:#f50000">{{ $errors->first('prices') }}</p>
                            @endif
                            @if ($errors->has('addresses'))
                                <p style="color:#f50000">{{ $errors->first('addresses') }}</p>
                            @endif

                            <div>
                                <button type="button" class="ips-row-btn-big mui-btn-red remove-price">删除</button>
                            </div>
                        </li>

                        <li class="mui-table-view-cell addr">
                            <h4 ><span class="ips-span-first">交货地点</span></h4>
                            <h5 ><span class="ips-span-first-short">操作</span><span>交货地点</span></h5>

                            @if (!empty(old('addresses.'.$k, $offer_information->addresses[$k])))
                                @foreach (old('addresses.'.$k, $offer_information->addresses[$k]) as $type => $val_list)
                                    @if (!empty($val_list))
                                        @foreach ($val_list as $val)
                                            @if ($type == 'company')

                                                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                                                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                                                    <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">公司 {{$val}}</span>
                                                    <input class="addresses" type="text" name="addresses[{{ $k }}][company][]" value="{{$val}}" hidden/>
                                                </h5>

                                            @elseif ($type == 'port')

                                                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                                                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                                                    <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">港口 {{$val}}</span>
                                                    <input class="addresses" type="text" name="addresses[{{ $k }}][port][]" value="{{$val}}" hidden/>
                                                </h5>

                                            @elseif ($type == 'station')

                                                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                                                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                                                    <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">货运站 {{$val}}</span>
                                                    <input class="addresses" type="text" name="addresses[{{ $k }}][station][]" value="{{$val}}" hidden/>
                                                </h5>

                                            @elseif ($type == 'since')

                                                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                                                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                                                    <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">自提 {{$val}}</span>
                                                    <input class="addresses" type="text" name="addresses[{{ $k }}][since][]" value="{{$val}}" hidden/>
                                                </h5>

                                            @elseif ($type == 'other')

                                                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                                                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                                                    <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">其它 {{$val}}</span>
                                                    <input class="addresses" type="text" name="addresses[{{ $k }}][other][]" value="{{$val}}" hidden/>
                                                </h5>

                                            @endif
                                        @endforeach
                                    @endif
                                @endforeach
                            @endif

                            <div>
                                <button type="button" class="mui-btn-success add-addr">地点+</button>
                            </div>
                        </li>
                    </ul>
                </div>
            @endforeach
        @else

            <div  class="mui-content ips-mui-content-no-top" >
                <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
                    <li class="mui-table-view-cell">
                        <h4 ><span class="ips-span-first">单价（元/吨）</span><span class="ips-span-input" >
						<input type="text" name="prices[]" class="ips-inputtext price" style="font-size: 16px; height: 25px;" placeholder="请填写"></span></h4>
                        <div>
                            <button type="button" class="ips-row-btn-big mui-btn-red remove-price">删除</button>
                        </div>
                    </li>

                    <li class="mui-table-view-cell addr">
                        <h4 ><span class="ips-span-first">交货地点</span></h4>
                        <h5 ><span class="ips-span-first-short">操作</span><span>交货地点</span></h5>
                        <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                            <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                        <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">选择
                        </span>
                        </h5>
                        <div>
                            <button type="button" class="mui-btn-success add-addr">地点+</button>
                        </div>
                    </li>
                </ul>
            </div>
        @endif

        <div class="mui-content-padded ips-detail-page-bottom">
            <div class="mui-button-row">
                <button type="button" id="addQuote" class="mui-btn mui-btn-blue" onclick="return false;">追加报价</button>&nbsp;&nbsp;
                <button type="submit" id="saveQuote" class="mui-btn mui-btn-success" >提交保存</button>
            </div>
        </div>
    </span>
    </form>

    <div id="tpl" class="mui-content ips-mui-content-no-top" hidden>
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
            <li class="mui-table-view-cell">
                <h4 ><span class="ips-span-first">单价（元/吨）</span><span class="ips-span-input" >
						<input type="text" name="prices[]" class="ips-inputtext price" style="font-size: 16px; height: 25px;" placeholder="请填写"></span></h4>
                <div>
                    <button type="button" class="ips-row-btn-big mui-btn-red remove-price">删除</button>
                </div>
            </li>

            <li class="mui-table-view-cell addr">
                <h4 ><span class="ips-span-first">交货地点</span></h4>
                <h5 ><span class="ips-span-first-short">操作</span><span>交货地点</span></h5>
                <h5 style="font-size: 16px; margin: 10px 0px 20px 0px;">
                    <span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>
                        <span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">选择
                        </span>
                </h5>
                <div>
                    <button type="button" class="mui-btn-success add-addr">地点+</button>
                </div>
            </li>
        </ul>
    </div>
@stop

@section('js')

    <script type="text/javascript">


        var placeData = [{
            value: 'company',
            text: '公司',
            children: [
                {
                    value: "所有公司",
                    text: "所有公司"
                },
                    @foreach ($companies as $company)
                {
                    value: "{{ $company->name }}",
                    text: "{{ $company->name }}"
                },
                @endforeach
            ]
        }, {
            value: 'port',
            text: '港口',
            children: [
                    @foreach ($ports as $port)
                {
                    value: "{{ $port }}",
                    text: "{{ $port }}"
                },
                @endforeach
            ]
        }, {
            value: 'station',
            text: '货运站',
            children: [
                    @foreach ($stations as $station)
                {
                    value: "{{ $station }}",
                    text: "{{ $station }}"
                },
                @endforeach
            ]
        }, {
            value: 'since',
            text: '自提',
            children: [
                {
                    value: "供方工厂（自提）",
                    text: "供方工厂（自提）"
                }
            ]
        }, {
            value: 'other',
            text: '其它',
            children: [
                {
                    value: "",
                    text: " "
                }
            ]
        }
        ]

        // 绑定 地址选择事件
        function setPlacePicker() {

            var placePicker = new mui.PopPicker({
                layer: 2
            });

            placePicker.setData(placeData);
            var selectList = document.getElementsByClassName('addrSelect');
            for (var i=0; i<selectList.length; i++) {

                // 绑定事件无法直接传递 i 值 实际上是 传递的 i 变量
                // 添加属性 传递 i 的值
                selectList[i].num = i;
                var func = function(event) {

                    placePicker.num = this.num;
                    placePicker.show(function(items) {

                        // 显示选定的 交货地点
                        selectList[this.num].innerText = items[0].text + " " + items[1].text;
                        var currentIndex = $('#price-list').find('.price').index($(selectList[this.num]).parent().parent().parent().parent().find('.price'));
                        var value = items[0].value;
                        switch (value) {
                            case "company":
                                var addressInput = $('<input class="addresses" type="text" name="addresses['+ currentIndex +'][company][]" value="'+ items[1].text + '" hidden/>');
                                $(selectList[this.num]).next(".addresses").remove();
                                addressInput.insertAfter($(selectList[this.num]));
                                break;
                            case "port":
                                var addressInput = $('<input class="addresses" type="text" name="addresses['+ currentIndex +'][port][]" value="'+ items[1].text + '" hidden/>');
                                $(selectList[this.num]).next(".addresses").remove();
                                addressInput.insertAfter($(selectList[this.num]));
                                break;
                            case "station":
                                var addressInput = $('<input class="addresses" type="text" name="addresses['+ currentIndex +'][station][]" value="'+ items[1].text + '" hidden/>');
                                $(selectList[this.num]).next(".addresses").remove();
                                addressInput.insertAfter($(selectList[this.num]));
                                break;
                            case "since":
                                var addressInput = $('<input class="addresses" type="text" name="addresses['+ currentIndex +'][since][]" value="'+ items[1].text + '" hidden/>');
                                $(selectList[this.num]).next(".addresses").remove();
                                addressInput.insertAfter($(selectList[this.num]));
                                break;
                            case "other":
                                var addressInput = $('<input class="addresses  add-other" type="text" name="addresses['+ currentIndex +'][other][]" value="'+ items[1].text + '" />');
                                $(selectList[this.num]).next(".addresses").remove();
                                addressInput.insertAfter($(selectList[this.num]));
                                break;
                            default:
                                break;
                        }
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }

                // 利用 jquery unbind 方法 解除多次绑定问题
                $(selectList[i]).unbind().bind('tap', func);
            }
        }

        // 物料选择
        (function($, doc) {
            $.init();
            $.ready(function() {

                //普通示例
                var userPicker = new $.PopPicker();
                userPicker.setData([
                    {
                        value: '',
                        text: '请选择'
                    },
                    @foreach ($goods_records as $goods)
                    {
                        value: '{{ $goods->id }}',
                        text: '{{ $goods->name }}'
                    },
                    @endforeach
                ]);
                var showUserPickerButton = doc.getElementById('showUserPicker');
                var userResult = doc.getElementById('showUserPicker');
                var pickerValue = doc.getElementById('goods_id');

                showUserPickerButton.addEventListener('tap', function(event) {
                    userPicker.show(function(items) {
                        userResult.innerText = items[0].text;
                        pickerValue.value = items[0].value;

                        // 物料关联质量指标
                        var id = "g-d-" + items[0].value;
                        var qsVal = doc.getElementById(id);
                        var quality_standard = doc.getElementById('quality_standard');

                        if (items[0].value != '') {
                            quality_standard.innerText = qsVal.innerText;
                        } else {
                            quality_standard.innerText = '';
                        }
                        //返回 false 可以阻止选择框的关闭
                        //return false;
                    });
                }, false);

                setPlacePicker();

            });
        })(mui, document);

        // 点击追加报价
        $('#addQuote').on("click",function() {
            var div = $('#tpl').clone(true, true);
            div.removeAttr("id");
            div.removeAttr("hidden");
            div.insertBefore($(this).parent());
            setPlacePicker();
        });

        function removeAddr() {
            $(this).parent().remove();
        }

        $('.remove-price').click(function() {
            $(this).parent().parent().parent().remove();
        });

        // id price-list 中 同时含有 ips-table-row-btn mui-btn-red  中间加点 没有空格
        $('#price-list .ips-table-row-btn.mui-btn-red').click(function() {
            $(this).parent().parent().remove();
        });

        // 点击增加地址
        $('.add-addr').on("click",function() {
            var wrapper = $('<h5 style="font-size: 16px; margin: 10px 0px 20px 0px;"></h5>');
            var closeBtn = $('<span class="ips-span-first-short"><button type="button" class="ips-table-row-btn mui-btn-red">X</button></span>');
            var selectBtn = $('<span id="" class="ips-text-blue addrSelect" style="position: absolute; padding-top: 2px;">选择</span>');
            closeBtn.click(removeAddr);
            wrapper.append(closeBtn);
            wrapper.append(selectBtn);
            wrapper.insertBefore($(this).parent());
            setPlacePicker();
        });

        (function($, doc) {
            $.init();
            var btns = doc.getElementsByClassName('btn');

            for (var i=0; i<btns.length; i++) {

                btns[i].num = i;
                btns[i].addEventListener('tap', function() {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    var picker = new $.DtPicker(options);

                    // lvze add
                    picker.num=this.num

                    picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        btns[this.num].value = rs.text;
                        /*
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        picker.dispose();
                    });
                }, false);
            }
        })(mui, document);

    </script>

@stop